<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="分享" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>

        <view class="coreshop-flex coreshop-justify-center coreshop-padding-10">
            <image :src="path" mode="widthFix" style="width: 100%;"></image>

            <l-painter ref="painter" custom-style="position: fixed; left: 200%" css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)">
                <l-painter-image :src="userInfo.avatarImage" css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;" />
                <l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
                    <l-painter-text :text="userInfo.nickName" css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold" />
                    <l-painter-text :text="showModel.describe" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
                </l-painter-view>
                <l-painter-view css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
                    <l-painter-image :src="showModel.image" css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;" />
                    <l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;" v-if="showPrice">
                        <l-painter-text text="￥" css="vertical-align: bottom" />
                        <l-painter-text :text="showModel.price" css="vertical-align: bottom; font-size: 58rpx" />
                        <l-painter-text text="元" css="vertical-align: bottom" />
                        <l-painter-text v-if="showModel.mktprice>0" :text="'￥'+ showModel.mktprice" css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999" />
                    </l-painter-view>
                    <l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;" v-if="showStore">
                        <l-painter-text :text="showModel.storeDesc" css="vertical-align: bottom; font-size: 48rpx" />
                    </l-painter-view>
                    <l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400" v-if="showPinTuanArguments">
                        <l-painter-text :text="'截止：'+showModel.pinTuan.endTime" css="color: #212121; background: #ffb400;" />
                        <l-painter-text :text="showModel.pinTuan.peopleNumber+'人团'" css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;" />
                        <!--<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9" />-->
                    </l-painter-view>
                    <l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400" v-if="showGroupPurchaseSeckillArguments">
                        <l-painter-text :text="'截止：'+showModel.groupPurchaseSeckill.endTime" css="color: #212121; background: #ffb400;" />
                        <!--<l-painter-text text="满减优惠" css="margin-left: 16rpx; background: #fff4d9" />-->
                    </l-painter-view>
                    <l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
                        <l-painter-text :text="showModel.brief" css="margin-left: 16rpx; background: #fff4d9" />
                    </l-painter-view>
                    <l-painter-view css="margin-top: 30rpx">
                        <l-painter-text css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
                                        :text="showModel.name"></l-painter-text>
                        <l-painter-image :src="poster" css="width: 128rpx; height: 128rpx;" />
                        <!--<l-painter-qrcode css="width: 128rpx; height: 128rpx;" text="limeui.qcoon.cn"></l-painter-qrcode>-->
                    </l-painter-view>
                </l-painter-view>
            </l-painter>

        </view>

        <view class="share-bot flex flex-direction coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10 coreshop-flex-direction-row coreshop-justify-between">
            <view>
                <u-button shape="square" type="primary" @click="savePoster()">
                    <u-icon name="download" :margin-right="20" label="保存到本地" color="#fff" labelColor="#fff"></u-icon>
                </u-button>
            </view>
            <view>
                <u-button shape="square" type="primary" @click="goBack()">
                    <u-icon name="arrow-leftward" :margin-right="20" label="返回上一页" color="#fff" labelColor="#fff"></u-icon>
                </u-button>
            </view>
        </view>
        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>
<script>
    var _this;
    export default {
        data() {
            return {
                poster: '',
                path: '',
                userInfo: {},
                priceSection: '',
                showModel: {
                    describe: '为您挑选了一个好物',
                    price: 0.00,
                    mktprice: 0.00,
                    brief: '',
                    image: '',
                    name: '',
                    pinTuan: {
                        endTime: '',
                        peopleNumber: 0,
                    },
                    groupPurchaseSeckill: {
                        endTime: '',
                    },
                    storeDesc: ''
                },
                showPinTuanArguments: false,
                showGroupPurchaseSeckillArguments: false,
                showPrice: true,
                showStore: true
            };
        },
        onLoad(options) {
            console.log("接收传输数据：", options);
            _this = this;
            _this.poster = decodeURIComponent(options.posterUrl);
            _this.userInfo = this.$store.state.userInfo;

            uni.showLoading({
                title: '加载中'
            });
            if (options.shareType == _this.$globalConstVars.shareType.goods) {
                let data = {
                    id: parseInt(options.goodsId)
                }
                _this.$u.api.goodsDetail(data).then(res => {
                    if (res.status == true) {
                        console.log(res.data);
                        _this.showModel.image = res.data.image;
                        _this.showModel.brief = res.data.brief;
                        _this.showModel.name = res.data.name;
                        _this.showModel.price = res.data.product.price;
                        _this.showModel.mktprice = res.data.product.mktprice;

                        setTimeout(function () {
                            _this.canvasToTempFilePath();
                            uni.hideLoading();
                        }, 1000);

                    } else {
                        _this.$refs.uToast.show({
                            message: res.msg, type: 'error', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    }
                })
            }
            else if (options.shareType == _this.$globalConstVars.shareType.pinTuan || options.shareType == _this.$globalConstVars.shareType.addPinTuan) {
                let data = {
                    id: parseInt(options.groupId),
                    data: false,
                }
                _this.$u.api.pinTuanGoodsInfo(data).then(res => {
                    if (res.status == true) {
                        console.log(res.data);
                        _this.showModel.describe = "为您推荐了一个拼团活动";
                        _this.showModel.image = res.data.image;
                        _this.showModel.brief = res.data.name;
                        _this.showModel.name = res.data.pinTuanRule.name;
                        _this.showModel.price = res.data.pinTuanPrice;
                        _this.showModel.mktprice = res.data.mktprice;

                        _this.showPinTuanArguments = true;
                        _this.showModel.pinTuan.endTime = res.data.pinTuanRule.endTime;
                        _this.showModel.pinTuan.peopleNumber = res.data.pinTuanRule.peopleNumber;

                        setTimeout(function () {
                            _this.canvasToTempFilePath();
                            uni.hideLoading();
                        }, 1000);

                    } else {
                        _this.$refs.uToast.show({
                            message: res.msg, type: 'error', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    }
                })
            }
            else if (options.shareType == _this.$globalConstVars.shareType.serviceGoods) {
                let data = {
                    id: parseInt(options.serviceGoodsId),
                    data: false,
                }
                _this.$u.api.getServiceDetail(data).then(res => {
                    if (res.status == true) {
                        console.log(res.data);
                        _this.showModel.describe = "为您推荐了一个服务商品";
                        _this.showModel.image = res.data.thumbnail;
                        _this.showModel.brief = res.data.description;
                        _this.showModel.name = res.data.title;
                        _this.showModel.price = res.data.money;
                        _this.showModel.mktprice = res.data.mktprice;

                        setTimeout(function () {
                            _this.canvasToTempFilePath();
                            uni.hideLoading();
                        }, 1000);

                    } else {
                        _this.$refs.uToast.show({
                            message: res.msg, type: 'error', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    }
                })

            }
            else if (options.shareType == _this.$globalConstVars.shareType.seckill) {
                let data = {
                    id: parseInt(options.groupId),
                    type: _this.$globalConstVars.shareType.seckill,
                    needSku: true
                }
                let userToken = this.$db.get('userToken');
                if (userToken) {
                    data.token = userToken
                }
                _this.$u.api.groupInfo(data).then(res => {
                    if (res.status == true) {
                        console.log(res.data);
                        _this.showModel.describe = "为您推荐了一个秒杀";
                        _this.showModel.image = res.data.image;
                        _this.showModel.brief = res.data.brief;
                        _this.showModel.name = res.data.name;
                        _this.showModel.price = res.data.price;
                        _this.showModel.mktprice = res.data.mktprice;

                        _this.showGroupPurchaseSeckillArguments = true;
                        _this.showModel.groupPurchaseSeckill.endTime = res.data.groupEndTime;

                        setTimeout(function () {
                            _this.canvasToTempFilePath();
                            uni.hideLoading();
                        }, 1000);

                    } else {
                        _this.$refs.uToast.show({
                            message: res.msg, type: 'error', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    }
                })
            }
            else if (options.shareType == _this.$globalConstVars.shareType.group) {
                let data = {
                    id: parseInt(options.groupId),
                    type: _this.$globalConstVars.shareType.seckill,
                    needSku: true
                }
                let userToken = this.$db.get('userToken');
                if (userToken) {
                    data.token = userToken
                }
                _this.$u.api.groupInfo(data).then(res => {
                    if (res.status == true) {
                        console.log(res.data);
                        _this.showModel.describe = "为您推荐了一个团购";
                        _this.showModel.image = res.data.image;
                        _this.showModel.brief = res.data.brief;
                        _this.showModel.name = res.data.name;
                        _this.showModel.price = res.data.price;
                        _this.showModel.mktprice = res.data.mktprice;

                        _this.showGroupPurchaseSeckillArguments = true;
                        _this.showModel.groupPurchaseSeckill.endTime = res.data.groupEndTime;

                        setTimeout(function () {
                            _this.canvasToTempFilePath();
                            uni.hideLoading();
                        }, 1000);

                    } else {
                        _this.$refs.uToast.show({
                            message: res.msg, type: 'error', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    }
                })
            }
            else if (options.shareType == _this.$globalConstVars.shareType.inv) {
                _this.$u.api.getDistributionStoreInfo({
                    id: options.store
                }).then(res => {
                    if (res.status) {
                        _this.showModel.describe = '共有' + res.data.totalGoods + '件商品供您选择';
                        _this.showModel.name = res.data.storeDesc ? res.data.storeDesc : "欢迎您访问我的店铺";
                        _this.showModel.storeDesc = res.data.storeName ? res.data.storeName : "我的店铺";
                        _this.showModel.image = res.data.storeLogo ? res.data.storeLogo : '/static/images/common/empty.png';

                        _this.showPrice = false;
                        setTimeout(function () {
                            _this.canvasToTempFilePath();
                            uni.hideLoading();
                        }, 1000);
                    } else {
                        _this.$refs.uToast.show({
                            message: res.msg, type: 'error', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    }
                });
            }
            else if (options.shareType == _this.$globalConstVars.shareType.agent) {
                _this.$u.api.getAgentInfo({
                    id: options.store
                }).then(res => {
                    if (res.status) {
                        _this.showModel.describe = '共有' + res.data.totalGoods + '件商品供您选择';
                        _this.showModel.name = res.data.storeDesc ? res.data.storeDesc : "欢迎您访问我的店铺";
                        _this.showModel.storeDesc = res.data.storeName ? res.data.storeName : "我的店铺";
                        _this.showModel.image = res.data.storeLogo ? res.data.storeLogo : '/static/images/common/empty.png';

                        _this.showPrice = false;
                        setTimeout(function () {
                            _this.canvasToTempFilePath();
                            uni.hideLoading();
                        }, 1000);
                    } else {
                        _this.$refs.uToast.show({
                            message: res.msg, type: 'error', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    }
                });
            }
			else if (options.shareType == _this.$globalConstVars.shareType.dealer) {
			    _this.$u.api.getDealerInfo({
			        id: options.store
			    }).then(res => {
			        if (res.status) {
			            _this.showModel.describe = '共有' + res.data.totalGoods + '件商品供您选择';
			            _this.showModel.name = res.data.storeDesc ? res.data.storeDesc : "欢迎您访问我的店铺";
			            _this.showModel.storeDesc = res.data.storeName ? res.data.storeName : "我的店铺";
			            _this.showModel.image = res.data.storeLogo ? res.data.storeLogo : '/static/images/common/empty.png';
			
			            _this.showPrice = false;
			            setTimeout(function () {
			                _this.canvasToTempFilePath();
			                uni.hideLoading();
			            }, 1000);
			        } else {
			            _this.$refs.uToast.show({
			                message: res.msg, type: 'error', complete: function () {
			                    uni.navigateBack({
			                        delta: 1
			                    });
			                }
			            })
			        }
			    });
			}
        },
        computed: {
        },
        methods: {
            canvasToTempFilePath() {
                var _this = this;
                // 渲染
                this.$refs.painter.render();
                // 生成图片
                this.$refs.painter.canvasToTempFilePathSync({
                    fileType: "jpg",
                    quality: 1,
                    success: (res) => {
                        _this.path = res.tempFilePath;
                    },
                });
            },
            goBack() {
                uni.navigateBack({
                    delta: 1
                });
            },
            // 保存海报到本地
            savePoster() {
                let _this = this;
                // #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
                _this.downloadImageOfMp(_this.path)
                // #endif
            },
            //下载图片地址和图片名
            downloadIamge(imgsrc, name) {
                var image = new Image();
                // 解决跨域 Canvas 污染问题
                image.setAttribute('crossorigin', 'anonymous');
                image.onload = () => {
                    var canvas = document.createElement('canvas');
                    canvas.width = image.width;
                    canvas.height = image.height;
                    var context = canvas.getContext('2d');
                    context.drawImage(image, 0, 0, image.width, image.height);
                    var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
                    var a = document.createElement('a'); // 生成一个a元素
                    var event = new MouseEvent('click'); // 创建一个单击事件
                    a.download = name || 'photo'; // 设置图片名称
                    a.href = url; // 将生成的URL设置为a.href属性
                    a.dispatchEvent(event); // 触发a的单击事件
                };
                image.src = imgsrc;
            },
            downloadImageOfMp(image) {
                let _this = this

                // #ifdef APP-PLUS || APP-PLUS-NVUE
                uni.downloadFile({
                    url: image,
                    success(res) {
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success() {
                                _this.$refs.uToast.show({ message: '操作成功', type: 'success' })
                            },
                            fail() {
                                _this.$u.toast('图片保存失败')
                            }
                        });
                    },
                    fail() {
                        _this.$u.toast('下载失败')
                    }
                })
                // #endif

                // #ifdef MP
                uni.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success() {
                        console.log(image);
                        uni.saveImageToPhotosAlbum({
                            filePath: image,
                            success() {
                                _this.$refs.uToast.show({ message: '保存成功', type: 'success' })
                            },
                            fail() {
                                _this.$u.toast('图片保存失败')
                            }
                        });
                    },
                    fail() {
                        console.log('scope.writePhotosAlbum授权失败')
                    }
                })
                // #endif
            }
        }
    };
</script>
<style scoped lang="scss">
    @import "shareNewPoster.scss";
</style>
